<template>
  <view>
    <u-navbar
        :autoBack="true"
    >
      <view slot="center">
        <u-tabs lineColor="#454A5E" :list="navList" :activeStyle="{fontSize: '16px',fontWeight: 700, color: '#000'}" :inactiveStyle="{fontSize: '16px', color: '#000'}" @click="handleNavClick"></u-tabs>
      </view>
    </u-navbar>
    <view class="page-main">
      <train-list-item
          v-if="navIndex" v-for="item in listData" :key="item.id"
          :data="item" @click="link(item, 'train')"></train-list-item>
      <exam-list-item
          v-if="!navIndex" v-for="item in listData" :key="item.id"
          :data="item" btn-name="查看" @click="link(item, 'exam')"></exam-list-item>
    </view>
  </view>
</template>

<script>
import {
  reqGetExaminationStatisticsList,
  reqGetTrainingPlanList
} from '@/api/educational-training/examination-statistics'
import dayjs from 'dayjs'
import {DEFAULT_POST_URL} from '@/pages/work/training-tasks/constant'
import TrainListItem from "@/pages/work/training-tasks/components/TrainListItem";
import ExamListItem from "@/pages/work/online-examination/components/ExamListItem";
import { mapMutations } from 'vuex'
import config from '@/config'

const foramtTime = (time) => dayjs(time).format("YYYY/MM/DD HH:mm")
export default {
  name: 'online-examination',

  components: {
    TrainListItem,
    ExamListItem
  },

  props: {},

  data() {
    return {
      pageNum: 1,
      total: 0,
      navIndex: 0,
      navList: [{name: '考试统计'}, {name: '培训统计'}],
      listData: []
    }
  },

  onShow() {
    this.initData()
  },
  onPullDownRefresh() {
    this.initData()
  },
  onReachBottom() {
    this.pageNum++
    this.getlist()
  },

  computed: {},

  watch: {},

  created() {
  },

  mounted() {
  },

  destroyed() {
  },

  methods: {
    ...mapMutations(['onlineExamSetStaticDetail']),
    getlist() {
      if (this.navIndex) {
        this.getTrainlist()
      } else {
        this.getExamlist()
      }
    },
    initData() {
      this.pageNum = 1
      this.total = null
      this.listData = []
      this.getlist()
    },
    getExamlist() {
      const formatRows = (rows) =>
          rows.map((item) => ({
            ...item,
            id: item.examPlanId,
            examName: item.examName,
            examDuration: item.examDuration || 0,
            startTime: foramtTime(item.startTime),
            endTime: foramtTime(item.endTime),
          }))
      if (!this.total || this.total > this.listData.length) {
        reqGetExaminationStatisticsList({pageNum: this.pageNum}).then((res) => {
          if (this.pageNum === 1) {
            this.listData = formatRows(res.rows)
          } else {
            this.listData.push(...formatRows(res.rows))
          }
          this.total = res.total
          uni.stopPullDownRefresh()
        })
      }
    },
    getTrainlist() {
      const formatRows = (rows) =>
          rows.map((item) => ({
            ...item,
            id: item.trainingPlanId,
            title: item.trainingPlanName,
            src: item.coverUrl ? config.staticUrl + item.coverUrl : DEFAULT_POST_URL,
            startTime: foramtTime(item.startTime),
            endTime: foramtTime(item.endTime),
          }))
      if (!this.total || this.total > this.listData.length) {
        reqGetTrainingPlanList({pageNum: this.pageNum}).then((res) => {
          if (this.pageNum === 1) {
            this.listData = formatRows(res.rows)
          } else {
            this.listData.push(...formatRows(res.rows))
          }
          this.total = res.total
          uni.stopPullDownRefresh()
        })
      }
    },
    handleNavClick({index}) {
      if(this.navIndex === index) return
      this.navIndex = index
      this.initData()
    },
    link(item, mode) {
      this.onlineExamSetStaticDetail(item)
      uni.navigateTo({ url: `/pages/work/examination-statistics/detail?id=${item.id}&mode=${mode}`})
    },
  }
}
</script>

<style scoped lang="scss" type="text/scss">
.page-main {
  padding-top: 178rpx;
}

.content-box {
  margin-bottom: 30rpx;
  padding: 30rpx 30rpx 20rpx 30rpx;

  .info {
    position: relative;
  }

  image {
    width: 150rpx;
    height: 150rpx;
  }

  .time {
    font-size: 26rpx;
    color: #999999;
  }

  .submit {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    line-height: 50rpx;
    height: 50rpx;
    font-size: 28rpx;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    background: #c4c088;
    padding: 0 24rpx;
  }

  .footer {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
</style>
